<!-- 【入库信息】管理页面 -->
<template>
  <div class="body">
    <!-- 表单弹窗 -->
    <storage-form ref="storageDialog" @reloadList="getList"/>
    <!-- 查询条件 -->
    <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="90px">
      <el-form-item label="供应商名称" prop="supplierId">
        <el-select v-model="queryForm.supplierId" placeholder="请选择供应商名称" size="small" filterable clearable>
          <el-option v-for="supplier in supplierDict" :key="supplier.id" :value="supplier.id" :label="supplier.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="物品名称" prop="goodsId">
        <el-select v-model="queryForm.goodsId" placeholder="请选择物品名称" size="small" filterable clearable>
          <el-option v-for="goods in goodsDict" :key="goods.id" :value="goods.id" :label="goods.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入库时间" prop="storageTimeRange">
        <el-date-picker v-model="queryForm.storageTimeRange" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-export type="primary" size="mini" action="/admin/storage/export" title="导出数据" v-hasPermi="['storage:export']"/>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini"  @click="handleDeleteAll" v-hasPermi="['storage:delete']">批量删除</el-button>
      </el-col>
      <!--<el-col :span="1.5">-->
      <!--  <el-import type="primary" size="mini" action="/admin/storage/import" title="导入数据" @success="getList" v-hasPermi="['storage:import']"/>-->
      <!--</el-col>-->
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 表格区域 -->
    <el-table border :header-cell-style="{background:'#f4f4f5'}" :height="600" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="50"/>
      <el-table-column label="id" prop="id" v-if="false"/>
      <el-table-column label="序号" type="index" fixed width="50"/>
      <el-table-column label="供应商名称" prop="supplierId" sortable>
        <template slot-scope="scope">
          <span-label :dict="supplierDict" :value="scope.row.supplierId" label="name"></span-label>
        </template>
      </el-table-column>
      <el-table-column label="物品名称" prop="goodsId" sortable>
        <template slot-scope="scope">
          <span-label :dict="goodsDict" :value="scope.row.goodsId" label="name"></span-label>
        </template>
      </el-table-column>
      <el-table-column label="入库数量" prop="number" sortable/>
      <el-table-column label="入库备注" prop="remarks" show-overflow-tooltip sortable/>
      <el-table-column label="操作人" prop="userId" sortable>
        <template slot-scope="scope">
          <span-label :dict="sysUserDict" :value="scope.row.userId" label="userName"></span-label>
        </template>
      </el-table-column>
      <el-table-column label="入库时间" prop="storageTime" sortable/>
      <el-table-column label="操作" align="center" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="info" plain icon="el-icon-view" @click="openDialog({title:'查看入库信息',pageFrom:'view',id:scope.row.id})" v-hasPermi="['storage:view']">查看</el-button>
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="openDialog({title:'修改入库信息',pageFrom:'edit',id:scope.row.id})" v-hasPermi="['storage:edit']">修改</el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row.id)" v-hasPermi="['storage:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="true"
        :current-page="queryForm.current"
        :page-sizes="[5,10,20,30,50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import storageForm from './storageForm'
    export default {
      components: {storageForm},
      data() {
        return {
          loading: true,//是否加载完成
          selectedData: [],//勾选数据
          total: 0, //记录数
          supplierDict: [],
          goodsDict: [],
          sysUserDict: [],
          dataList: [],
          queryForm: {
            current: 1,
            size: 10,
            id: "",
            supplierId: "",
            goodsId: "",
            number: "",
            storageTimeRange: [],
            storageTime: "",
            userId: "",
            remarks: "",
          }
        };
      },
      mounted() {
        //初始化数据
        this.getList();
        //初始化【供应商名称】
        this.getSupplierDict();
        //初始化【物品名称】
        this.getGoodsDict();
        //初始化【操作人】
        this.getSysUserDict();
      },
      computed: {
      },
      methods: {
        //点击搜索
        handleQuery() {
          this.queryForm.current = 1;
          this.getList();
        },
        //查询列表数据
        getList() {
          this.$request.doGet('/admin/storage/getPage', this.queryForm).then(res => {
            if (res.isOk) {
              this.loading = false;
              this.dataList = res.obj.records;
              this.total = res.obj.total;
            }
          });
        },
        //【供应商名称】
        getSupplierDict() {
          this.$request.doGet('/admin/supplier/getList').then(res => {
            if (res.isOk) {
              this.supplierDict = res.list;
            }
          });
        },
        //【物品名称】
        getGoodsDict() {
          this.$request.doGet('/admin/goods/getList').then(res => {
            if (res.isOk) {
              this.goodsDict = res.list;
            }
          });
        },
        //【操作人】
        getSysUserDict() {
          this.$request.doGet('/admin/sysUser/getList').then(res => {
            if (res.isOk) {
              this.sysUserDict = res.list;
            }
          });
        },
        //重置查询
        resetQuery() {
          this.$refs['queryForm'].resetFields();
          this.handleQuery();
        },
        //打开弹窗
        openDialog(option) {
          this.$refs.storageDialog.open(option);
        },
        //选择页数
        handleSizeChange: function (size) {
          this.queryForm.size = size;
          this.getList();
        },
        //选择页码
        handleCurrentChange: function (currentPage) {
          this.queryForm.current = currentPage;
          this.getList();
        },
        //获取勾选数据
        handleSelectionChange(data) {
          this.selectedData = data;
        },
        //批量删除
        handleDeleteAll() {
          const that = this;
          that.showConfirm('确定删除选中的数据吗?', function () {
            if (that.selectedData.length > 0) {
              let ids = that.selectedData.map(function (v) {return v.id});
              that.$request.doGet('/admin/storage/delAll', {ids: ids}).then(res => {
                if (res.isOk) {
                  that.showSuccess("删除成功");
                  that.getList();
                }
              });
            } else {
              that.showWarn("至少选择一条数据！");
            }
          });
        },
        //选中行删除
        handleDelete(id) {
          const that = this;
          that.showConfirm('确定删除选中的数据吗?', function () {
            that.$request.doGet('/admin/storage/delete?id=' + id).then(res => {
              if (res.isOk) {
                that.showSuccess("删除成功");
                that.getList();
              }
            });
          });
        }
      }
    };
</script>
